<template>
  <!-- 首页的主体部分 -->
  <div class="index">
    <div class="main1">
      <div class="nav">
        <div class="nav-text" v-if="data1">
          <a href="#" v-for="(a, i) in data1" :key="i" @click="now = i, xiaoyu()" :class="{ active: now == i }">{{
              a.name
          }}
          </a>


        </div>
        <div class="swiper">
          <!-- 轮播图 -->
          <swiper ref="swiper" @mouseover.native="stopSwiper" @mouseout.native="startSwiper" class="swiper"
            :options="swiperOptions">
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero1.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero2.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h1_hero3.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h2_hero1.jpg" alt="" />
            </swiper-slide>
            <swiper-slide class="lunbo">
              <img src="../../public/img/hero/h2_hero2.jpg" alt="" />
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <div class="popr">
        <h2>有史以来最畅销的书籍</h2>
        <div class="box" v-if="data">
          <div class="bianli" v-for="s in data.result" :key="s.id">
            <div class="img1">
              <img :src="$store.state.imgBase + s.bookimg" alt="" />
            </div>
            <h3>{{ s.bookname }}</h3>
            <p>{{ s.bookauthor }}</p>
            <div class="box-img2">
              <img class="img2" src="../../public/img/logo/xx.png" alt="" />
            </div>
            <div class="pinlun">
              <span lang="pl">(<span class="shuzi">120</span>评论)</span>
              <span class="price">$50</span>
            </div>
          </div>

        </div>
      </div>
      <!-- 本周精选 -->
      <div class="main2">
        <div class="week">
          <div class="week-left">
            <div class="wtext">
              <span class="text1">本周精选</span>
              <span>查看全部</span>
            </div>
            <div class="tupin">
              <div class="imgb1">
                <img class="img3" src="../../public/img/gallery/best-books1.jpg" alt="" />
              </div>
              <div class="wtext-xq">
                <h1>龙之怒火</h1>
                <p class="zuozhe">埃文·温特</p>
                <p class="price2">$555.00</p>
                <div class="imgb3">
                  <img class="img3" src="../../public/img/logo/xxb.png" alt="" /><span class="pinlunm">(120评论)</span>
                </div>
                <button>查看详情</button>
              </div>
            </div>
          </div>
          <div class="week-reigth">
            <img class="week-reigth-tu" src="../../public/img/gallery/ad.jpg" alt="" />
          </div>
        </div>
        <div class="new">
          <div class="nav-new">
            <div class="nav-new-top">
              <h1>最新发布的项目</h1>
              <div class="nav-new-reigth" v-if="data2">
                <a href="#" v-for="(news, x) in data2" :key="x" @click="now2 = x" :class="{ active: now2 == x }">{{ news
                }}</a>

              </div>
            </div>
            <div class="box1">
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling7.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling7.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling9.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling5.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling7.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
              <div class="bianli">
                <div class="img1">
                  <img src="../../public/img/gallery/best_selling9.jpg" alt="" />
                </div>
                <h3>月舞</h3>
                <p>J.R雨</p>
                <div class="box-img2">
                  <img class="img2" src="../../public/img/logo/xx.png" alt="" />
                </div>
                <div class="pinlun">
                  <span>(<span class="shuzi">120</span>评论)</span>
                  <span class="price">$50</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 浏览更多以及查看详情、订阅 -->
      <div class="more">
        <div class="more-box">
          <router-link to="/history">浏览更多</router-link>
          <div class="xiangqing-tu">
            <div class="tu-left">
              <img src="../../public/img/gallery/wants-bg1.jpg" alt="" />
              <div class="tu-up">
                <span>菲比诺的历史</span>
                <a href="">查看详情</a>
              </div>
            </div>
            <div class="tu-right">
              <img src="../../public/img/gallery/wants-bg2.jpg" alt="" />
              <div class="tu-up">
                <span>威尔玛·穆杜亚</span>
                <a href="">查看详情</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 加入实时通讯 -->
        <div class="join">
          <div class="joinbox">
            <div>
              <img src="../../public/img/gallery/section-bg1.jpg" alt="" />
            </div>
            <div class="join-up">
              <h2>加入时事通讯</h2>
              <a href="">订阅</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getData();
    console.log(this.a)
  },
  data() {
    return {
      data: null,
      // 导航栏
      now: 0,
      // 导航栏
      data1: [
        {
          name: "首页",
          type: 1
        },
        {
          name: "历史",
          type: 2
        }, {
          name: "党史",
          type: 3
        },
        {
          name: "恐怖",
          type: 4
        },
        {
          name: "自传",
          type: 5
        },
        {
          name: "专业",
          type: 6
        },
        {
          name: "科幻",
          type: 7
        }],
      // 最新发布项目导航栏
      now2: 0,
      data2: ['全部', '科幻', '历史', '党史'],
      //swiper配置项
      swiperOptions: {
        //效果特效
        effect: "cors",
        //循环
        loop: true,
        //自动滚动
        // autoplay: {
        //   delay: 1000,
        //   disableOnInteraction: false,
        // },
      },
    };
  },
  methods: {
    xiaoyu() {
      console.log(1)
      this.$router.push({ name: "register" })
    },
    stopSwiper() {
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      this.$refs.swiper.$swiper.autoplay.start();
    },
    goyemian() {
      const target = '/history'
      if (this.$route.path !== target) {
        this.$router.push(target)
      }
    },
    getData() {
      const url = 'shouye/select?classid=1'
      this.axios.get(url).then((res) => {
        console.log(res)
        this.data = res.data
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.main1 {
  background-color: rgb(247, 232, 223);

  // 最畅销书籍
  .popr {
    background-color: rgb(247, 232, 223);
    margin-top: 50px;
    height: 570px;

    h2 {
      font-size: 25px;
      font-weight: 500;
      margin-bottom: 60px;
      letter-spacing: 3px;
    }

    .box {
      width: 1300px;
      height: 438px;
      margin: auto;
      // background-color: aquamarine;
      display: flex;
      justify-content: space-between;

      // margin-left: 20px;
      .bianli {
        height: 438px;
        width: 192px;
        background-color: aliceblue;

        .img1 {
          width: 192px;
          height: 289px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
            transition: all 0.5s;
          }

          img:hover {
            transform: scale(1.2);
          }
        }

        h3 {
          // background-color: blueviolet;
          margin-top: 30px;
          text-align: left;
          padding-left: 20px;
        }

        h3:hover {
          color: red;
        }

        p {
          margin-top: 12px;
          text-align: left;
          padding-left: 20px;
        }

        p:hover {
          color: red;
        }

        .box-img2 {
          margin-top: 25px;
          width: 150px;
          height: 20px;
          // background-color: burlywood;
          display: flex;
          margin-left: 15px;

          .img2 {
            width: 15px;
            height: 15px;
          }
        }

        .pinlun {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;
          padding: 0 15px;

          .pl {
            color: black;
          }

          .shuzi {
            color: coral;
          }

          .shuzi:hover {
            color: red;
          }

          .price {
            font-size: 20px;
            font-weight: 600;
            color: red;
          }
        }
      }

    }
  }

  .nav-text {
    margin: auto;
    // background-color: aquamarine;
    height: 60px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 3px;

    a {
      font-size: 20px;
      height: 60px;
      width: 80px;
      line-height: 60px;
      transition: all 0.5s;

      &.active {
        background-color: red;
        color: white;
      }
    }
  }
}

// 本周精选样式
.main2 {
  background-color: rgb(255, 252, 252);
  padding-top: 60px;

  .week {
    height: 600px;
    width: 1300px;
    margin: auto;
    background-color: rgb(255, 252, 252);
    display: flex;

    .week-left {
      height: 485px;
      width: 80%;
      background-color: rgb(253, 63, 63);

      .wtext {
        height: 40px;
        width: 100%;
        background-color: rgb(255, 252, 252);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text1 {
          font-size: 20px;
          font-weight: 500;
        }
      }

      .tupin {
        height: 400px;
        width: 60%;
        // background-color: crimson;
        margin-left: 10px;
        margin-top: 22px;
        display: flex;

        .imgb1 {
          height: 400px;
          overflow: hidden;

          .img3 {
            height: 100%;
            cursor: pointer;
            transition: all 0.5s;
          }

          .img3:hover {
            transform: scale(1.2);
          }
        }

        .wtext-xq {
          height: 250px;
          width: 230px;
          background-color: aqua;
          margin-left: 40px;
          margin-top: 80px;

          h1 {
            font-size: 25px;
            color: white;
            text-align: left;
          }

          .zuozhe {
            color: white;
            font-size: 12px;
            text-align: left;
            margin-top: 10px;

            .span {
              width: 70px;
              background-color: aqua;
            }
          }

          .price2 {
            font-size: 20px;
            color: white;
            text-align: left;
            margin-top: 30px;
          }

          .imgb3 {
            height: 30px;
            width: 150px;
            // background-color: darkturquoise;
            display: flex;
            align-items: center;
            margin-top: 15px;

            .img3 {
              height: 15px;
              width: 15px;
            }

            .pinlunm {
              font-size: 10px;
            }
          }

          button {
            width: 120px;
            height: 50px;
            background-color: rgb(253, 63, 63);
            border: 1px solid white;
            margin-top: 20px;
            border-radius: 50px;
            color: white;
            font-weight: 100;
          }

          button:hover {
            color: black;
            width: 125px;
            height: 55px;
          }
        }
      }
    }

    .week-reigth {
      height: 485px;
      width: 20%;
      background-color: cadetblue;
      margin-left: 20px;

      .week-reigth-tu {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 最新发布
.new {
  // background-color: aquamarine;
  width: 100%;
  height: 560px;

  .nav-new {
    height: 550px;
    width: 1300px;
    margin: auto;

    .box1 {
      height: 550px;
      width: 1300px;
      background-color: rgb(255, 252, 252);
      display: flex;
      justify-content: space-between;
    }

    .nav-new-top {
      height: 50px;
      width: 1300px;
      // background-color: blueviolet;
      display: flex;
      justify-content: space-between;
      margin-bottom: 21px;

      .nav-new-reigth {
        height: 50px;
        width: 600px;
        // background-color: crimson;
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
          font-size: 18px;
          width: 110px;
          height: 50px;
          // background-color: rgb(253, 63, 63);
          background-color: #fff;
          border: 1px solid gainsboro;
          border-radius: 40px;
          line-height: 50px;

          &.active {
            background-color: red;
            color: white;
          }
        }

        a:hover {
          background-color: red;
        }
      }

      h1 {
        height: 50px;
        width: 250px;
        line-height: 50px;
        text-align: left;
        font-size: 25px;
        font-weight: 500;
      }
    }

    .bianli {
      height: 438px;
      width: 198px;
      background-color: aliceblue;

      .img1 {
        width: 192px;
        height: 289px;
        overflow: hidden;

        img {
          width: 100%;
          cursor: pointer;
          transition: all 0.5s;
        }

        img:hover {
          transform: scale(1.2);
        }
      }

      h3 {
        // background-color: blueviolet;
        margin-top: 30px;
        text-align: left;
        padding-left: 20px;
      }

      h3:hover {
        color: red;
      }

      p {
        margin-top: 12px;
        text-align: left;
        padding-left: 20px;
      }

      p:hover {
        color: red;
      }

      .box-img2 {
        margin-top: 25px;
        width: 150px;
        height: 20px;
        // background-color: burlywood;
        display: flex;
        margin-left: 15px;

        .img2 {
          width: 15px;
          height: 15px;
        }
      }

      .pinlun {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;

        .shuzi {
          color: coral;
        }

        .price {
          font-size: 20px;
          font-weight: 600;
          color: red;
        }
      }
    }
  }
}

.more {
  width: 100%;
  height: 600px;
  background-color: rgb(255, 252, 252);

  // background-color: royalblue;
  .more-box {
    width: 1300px;
    height: 360px;
    // background-color: red;
    margin: auto;

    a {
      display: block;
      width: 130px;
      height: 50px;
      margin: auto;
      background-color: rgb(255, 252, 252);
      line-height: 50px;
      border-radius: 40px;
      border: 1px solid red;
      margin-bottom: 100px;
    }

    a:hover {
      background-color: red;
    }

    .xiangqing-tu {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .tu-left {
        width: 49%;
        height: 200px;
        // background-color: cornflowerblue;
        position: relative;

        img {
          width: 100%;
        }

        .tu-up {
          position: absolute;
          top: 80px;
          left: 50px;
          width: 80%;
          height: 50%;
          // background-color: red;
          color: white;
          font-size: 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          letter-spacing: 3px;

          a {
            font-size: 20px;
            color: white;
            width: 160px;
            height: 50px;
            margin-left: 140px;
            background-color: rgb(253, 63, 63);
            text-align: center;
            line-height: 50px;
            border-radius: 40px;
          }

          a:hover {
            background-color: antiquewhite;
            color: red;
          }
        }
      }

      .tu-right {
        width: 49%;
        height: 200px;
        // background-color: crimson;
        position: relative;

        img {
          width: 100%;
        }

        .tu-up {
          position: absolute;
          top: 80px;
          left: 50px;
          width: 80%;
          height: 50%;
          // background-color: red;
          color: white;
          font-size: 25px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          letter-spacing: 3px;

          a {
            font-size: 20px;
            color: white;
            width: 160px;
            height: 50px;
            margin-left: 140px;

            background-color: rgb(253, 63, 63);
            text-align: center;
            line-height: 50px;
            border-radius: 40px;
          }

          a:hover {
            background-color: antiquewhite;
            color: red;
          }
        }
      }
    }
  }

  // 加入实时通讯
  .join {
    width: 100%;

    // background-color: blueviolet;
    .joinbox {
      width: 1300px;
      height: 400px;
      // background-color: antiquewhite;
      margin: auto;
      position: relative;

      img {
        width: 1300px;
        height: 351px;
      }

      .join-up {
        height: 200px;
        width: 500px;
        // background-color: antiquewhite;
        position: absolute;
        top: 60px;
        left: 350px;

        h2 {
          height: 50px;
          width: 200px;
          // background-color: aqua;
          margin: auto;
          color: white;
          font-size: 25px;
          line-height: 50px;
          // 文字间距
          letter-spacing: 3px;
        }

        a {
          display: block;
          width: 130px;
          height: 50px;
          margin: auto;
          // background-color: aquamarine;
          margin-top: 30px;
          border-radius: 40px;
          line-height: 50px;
          color: white;
          letter-spacing: 3px;
          background-color: rgb(253, 63, 63);
        }

        a:hover {
          background-color: antiquewhite;
          color: red;
        }
      }
    }
  }
}

.swiper {
  width: 1300px;
  height: 50%;
  margin: auto;
}

.lunbo>img {
  width: 100%;
  height: 580px;
}
</style>